<template>
  <div class="headerContainer">
    <div class="menu">
      <!-- @select="handleSelect" -->
      <el-menu
        :default-active="route.path"
        router
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        active-text-color="transpa"
      >
        <img
          src="https://rs.dance365.com/logo@3xrenew3.png"
          style=""
          class="logo"
        />
        <el-menu-item
          :index="item.name"
          v-for="(item, index) in navList"
          :key="index"
          class="nav_item"
          >{{ item.navItem }}</el-menu-item
        >

        <div style="margin-left: 30px"></div>
        <el-button
          class="navBtn"
          v-if="!userInfoStore.token"
          size="default"
          @click="toLogin"
          >登录</el-button
        >
        <el-button
          class="navBtn"
          v-if="!userInfoStore.token"
          size="default"
          @click="toRegister"
          >注冊</el-button
        >

        <el-button
          class="navBtn"
          v-if="userInfoStore.token"
          size="default"
          @click="loginOut"
          >退出登录</el-button
        >

        <div @click="toUserHome" style="cursor: pointer" class="avatarIcon">
          <el-avatar
            v-if="userInfoStore.token"
            icon="el-icon-user-solid"
            :size="40"
            shape="circle"
            :src="userInfo.avatar"
            fit="fill"
          ></el-avatar>
        </div>

        <div style="margin-left: 347px"></div>
        <el-menu-item
          :index="item.name"
          v-for="(item, index) in navRight"
          :key="index"
          class="right"
          >{{ item.navItem }}</el-menu-item
        >
      </el-menu>
    </div>
  </div>

  <!-- 登录 对话框 -->
  <el-dialog
    v-model="dialogVisible"
    title="登录页"
    width="30%"
    :before-close="closeDialog"
  >
    <el-form
      ref="ruleFormRef"
      :model="formData"
      :rules="rules"
      label-width="80px"
      :inline="false"
    >
      <el-form-item label="用户名" prop="phone">
        <el-input v-model="formData.phone"> </el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="requireLogin">登录</el-button>
        <el-button @click="closeLogin">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 注册对话框 -->
  <el-dialog
    v-model="dialogRegister"
    title="注册页"
    width="30%"
    :before-close="closeDialog"
  >
    <el-form
      ref="ruleFormRef"
      :model="formData"
      :rules="rules"
      label-width="80px"
      :inline="false"
    >
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formData.phone"> </el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password"></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="repassword">
        <el-input v-model="formData.repassword"></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="code">
        <el-input v-model="formData.code"></el-input>
        <el-button style="margin-top: 10px" @click="getCode"
          >获取验证码</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="requireLoginReg">立即创建</el-button>
        <el-button @click="closeLogin">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts">
import female from "../../assets/09.jpg";
import { result } from "lodash";
import PubSub from "pubsub-js";
import router from "@/router";
export default {
  name: "Nav",
  data() {
    return {
      famale: female,
    };
  },
};
</script>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { ElMessageBox, FormInstance, FormRules } from "element-plus";
import { computed, nextTick, onMounted, reactive, ref } from "vue";
import type { RouterLink } from "vue-router";
import userApi from "@/api/login/login";
import { useRouter } from "vue-router";
import { useUserInfoStore } from "@/stores/modules/userInfo";
const userInfoStore = useUserInfoStore();
const router = useRouter();
const userInfo = computed(() => {
  return userInfoStore.userInfo;
});

// 点击头像跳转个人中心
const toUserHome = () => {
  router.push({
    path: "/userHome",
  });
};

// 显示 dialog
const showLogin = () => {
  dialogVisible.value = true;
};

onMounted(() => {
  // pubsub
  PubSub.publish("showLogin", showLogin);
});
// 收集数据
let formData = reactive({
  phone: "",
  password: "",
  //////////
  repassword: "",
  code: "",
});

// 清空数据
const initFormData = () => {
  formData.phone = "";
  formData.password = "";
  formData.repassword = "";
  formData.code = "";
};
// 关于注册
// 注册dialog  显示隐藏
const dialogRegister = ref(false);

// 立即创建
const requireLoginReg = () => {
  dialogRegister.value = false;
  userInfoStore.register(formData);
  initFormData();
};

// 点击注册
const toRegister = () => {
  // 显示注册 会话框
  dialogRegister.value = true;
  // 发送注册请求
  userInfoStore.register(formData);
};

// 获取验证码  数据同步input
const getCode = async () => {
  try {
    let result = await userApi.reqCode(formData.phone);
    // console.log("验证码", result.data);
    formData.code = result.data;
  } catch (error) {
    console.log("获取验证码失败");
  }
};

// 关于登录
// 表单验证类
const ruleFormRef = ref<FormInstance>();

// validatePass
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("用户名不能为空"));
  } else {
    if (value.length < 5) {
      callback(new Error("用户名不能小于5位"));
    }
    callback();
  }
};

const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (value !== formData.repassword) {
    // callback(new Error("两次密码不同,请重新输入"));
    callback();
  } else {
    callback();
  }
};

const validatePass3 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (value !== formData.password) {
    callback(new Error("两次密码不同,请重新输入"));
  } else {
    callback();
  }
};

const validatePass4 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入验证码"));
  } else {
    callback();
  }
};

// rules
const rules = reactive({
  phone: [{ validator: validatePass }],
  password: [{ validator: validatePass2, trigger: "blur" }],
  repassword: [{ validator: validatePass3, trigger: "blur" }],
  code: [{ validator: validatePass4, trigger: "blur" }],
});

// 退出登录
const loginOut = () => {
  userInfoStore.loginOut();
  router.push({ path: "/index" });
};

//对话框显示隐藏
const dialogVisible = ref(false);
// 登录
const toLogin = () => {
  // 先弹窗
  dialogVisible.value = true;
};
// // 点击确认
const requireLogin = () => {
  // 关闭对话框
  dialogVisible.value = false;
  // 登录 请求
  userInfoStore.login(formData);
  // 重新获取数据
  userInfoStore.getUserInfo();
  // 清空表单数据
  initFormData();
  // 跳转到我的页面
  // router.push({ path: "/dynamics" });
};
// 点击取消
const closeLogin = () => {
  dialogVisible.value = false;
  dialogRegister.value = false;
  initFormData();
};
// 关闭dialog
const closeDialog = () => {
  initFormData();
  dialogVisible.value = false;
  dialogRegister.value = false;
};

const route = useRoute();
const navList = ref([
  { name: "/index", navItem: "资源" },
  { name: "/course", navItem: "课程" },
  { name: "/training", navItem: "练习室" },
  { name: "/home/information", navItem: "交流" },
  { name: "/center", navItem: "我的" },
]);
const navRight = ref([
  { navItem: "下载APP" },
  { navItem: "发布" },
  { name: "/login", navItem: "登陆" },
]);
</script>

<style scoped lang="less">
.headerContainer {
  width: 100%;
  height: 60px;
  background-color: #fff;
  overflow: hidden;
  // padding-left: auto;
  .menu {
    width: 1200px;
    margin: 0 auto;
    background: pink;
    position: relative;
    .nav_item {
      padding: 12px 10px;
      font-size: 18px;
      color: #111;
      text-decoration: none;
      margin-left: 40px;
    }
    .navBtn {
      height: 58px;
      border: none;
      padding: 20px 20px 0;
      font-size: 14px;
      color: #111;
      text-decoration: none;
      // margin-left: 20px;
      position: absolute;
      left: 750px;
      // 登录
      &:nth-of-type(1) {
        left: 700px;
      }
      // 注册
      &:nth-of-type(2) {
        left: 750px;
      }
    }
    .avatarIcon {
      position: absolute;
      left: 800px;
      top: 17px;
    }

    .right {
      margin-top: 10px;
    }
  }
}
.logo {
  display: block;
  width: 128px;
  height: 43px;
  padding-top: 15px;
  padding-right: 30px;
  margin-top: 8px;
}
</style>
